<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>文字横向滚动特效</title>
	</head>
	<style>
		.pad_right {
			padding-right: 2em;
		}
		
		#scroll_div {
			height: 26px;
			overflow: hidden;
			white-space: nowrap;
			width: 535px;
			margin-left: 10px;
			margin: auto;
		}
		
		#scroll_begin,
		#scroll_end {
			display: inline;
		}
	</style>

	<body>
		<div id="scroll_div" class="fl">
			<div id="scroll_begin">
				恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>
				恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>
				恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>
				恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>
				恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>
				恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>
				恭喜793765***获得 <span class="pad_right">50元巨人点卡奖励</span>
			</div>
			<div id="scroll_end"></div>
		</div>
	</body>
</html>
<script>
	//文字横向滚动
	function ScrollImgLeft(){ 
	 var speed=50;//速度
	 var MyMar = null;
	 var scroll_begin = document.getElementById("scroll_begin");//滚动开始 
	 var scroll_end = document.getElementById("scroll_end"); //滚动结束
	 var scroll_div = document.getElementById("scroll_div"); //滚动块等分
	 scroll_end.innerHTML=scroll_begin.innerHTML; 
	 //移动字幕效果
	 function Marquee(){ 
	 	//offsetWidth偏移宽度  scrollLeft向左滚动
	  	if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0){ 
	   		scroll_div.scrollLeft-=scroll_begin.offsetWidth;
	   	}
	  	else{
	   		scroll_div.scrollLeft++; 
	   	}
	  } 
	  //设定计时器 
	  MyMar=setInterval(Marquee,speed); 
	  //滚动块等分
	  scroll_div.onmouseover = function(){//鼠标移到目标上 
	　　　　　　　clearInterval(MyMar);
	　　　　　}
	 　　　　scroll_div.onmouseout = function(){//鼠标移开时
	　　　　　　　MyMar = setInterval(Marquee,speed); 　　　　
	　　　　　}  
	}
	//自调用
	ScrollImgLeft();
</script>